<template>
  <div class="tree-demo">
    <h3 class="title">基本</h3>
    <div>
      <p>值:{{ value }}</p>
      <p><d-switch v-model="toggleOnSelect" small>点击内容折叠内容</d-switch></p>
      <p>
        <d-button @click="expandAll" size="xs">全部展开</d-button>
        <d-button @click="expand([2, 3])" size="xs">展开部分</d-button>
        <d-button @click="foldAll" size="xs">全部收起</d-button>
        <d-button @click="updateSelect" size="xs">设置选中值</d-button>
        <d-button @click="getSelect" size="xs">获得选中值</d-button>
      </p>
      <d-tree :option="param" ref="demo" :toggleOnSelect="toggleOnSelect" v-model="value" @open="open"
      @select="select" @choose="choose"></d-tree>
    </div>
  </div>
</template>

<script>
export default {
  name: 'treeDemo',
  data () {
    let list = [
      { id: 1, title: '一级', treeIcon: 'd-icon-user' },
      { id: 2, title: '二级', treeIcon: 'd-icon-user' },
      { id: 3, title: '三级', disabled: true, treeIcon: 'd-icon-user' },
      { id: 10, title: '一级-0', parent: 1 },
      { id: 11, title: '一级-1', parent: 1 },
      { id: 12, title: '一级-2', parent: 1 },
      { id: 20, title: '二级-0', parent: 2 },
      { id: 21, title: '二级-1', parent: 2 },
      { id: 22, title: '二级-2', parent: 2 },
      { id: 30, title: '三级-0', parent: 3, treeIcon: 'd-icon-user' },
      { id: 301, title: '三级-0-1', parent: 30, treeIcon: 'd-icon-user' },
      { id: 31, title: '三级-1', parent: 3 },
      { id: 311, title: '三级-1-1', parent: 31 },
      { id: 32, title: '三级-2', parent: 3 }
    ]
    return {
      toggleOnSelect: true,
      value: null,
      param: {
        keyName: 'id',
        parentName: 'parent',
        titleName: 'title',
        dataMode: 'list',
        // datas: list
        datas () {
          // 可以使用方法
          return list
        }
      }
    }
  },
  methods: {
    expand (ids) {
      this.$refs.demo.expand(ids)
    },
    expandAll () {
      this.$refs.demo.expandAll()
    },
    foldAll () {
      this.$refs.demo.foldAll()
    },
    updateSelect () {
      // 两种方法都可以
      this.$refs.demo.updateSelect(21)
      // this.value = 21
      this.$Message.info('选中二级-1')
    },
    getSelect () {
      let option = this.$refs.demo.getSelect()
      if (option === null) {
        this.$Message.info('当前未选中')
      } else {
        this.$Message.info(`当前选中：${option.title}`)
      }
    },
    choose (data) {
      console.log(data)
    },
    select (data) {
      console.log(data)
    },
    open (data) {
      console.log(data)
    }
  }
}
</script>

<style lang="stylus" scoped>
// .tree-demo
</style>
